<template>
  <div class="home">
    <el-container class="home_container">
      <el-header class="home_header">
        <Header />
      </el-header>
      <el-container class="home_center_container">
        <el-aside class="home_aside" width="300px">
          <Aside />
        </el-aside>
        <el-main class="home_main">
          <div class="wapper">
            <!-- 路由放在这里 -->
            <router-view class="router_view" />
          </div>
        </el-main>
      </el-container>
      <el-footer class="home_footer">
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header/header.vue";
import Footer from "@/components/Footer/Footer.vue";
import Aside from "@/components/Aside/Aside.vue";
export default {
  name: "Home",
  components: { Header, Footer, Aside },
};
</script>

<style scoped lang='less'>
.home {
  width: 100%;
  height: 100%;
}
.home_container {
  height: 100%;
  .home_header {
    background-color: #c62f2f;
  }
  .home_aside {
    background-color: orangered;
  }
  .home_center_container {
    // background-color: orange;
    height: 60%;
    .home_main {
      background-color: #fafafa;
      .wapper {
        width: 1080px;
        height: 100%;
        margin: 0 auto;
        // background-color: red;
      }
    }
  }
}

.router_view {
  background-color: #fafafa;
}

.home_footer {
  padding: 0 !important;
}
</style>
